import { Menu, Pagination } from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem';
import { Link, useLocation } from 'react-router-dom';
import { indexNavs, types } from '../../router/index'
import QueryString from 'qs'
import Itemlist from '../../compoment/list'
import { useSelector } from 'react-redux';
import { useTopicsList } from '../../store/action/index'
import { useEffect } from 'react';
function Index() {
    // console.log(props);
    let { search } = useLocation()
    let { tab = 'all', page = 1 } = QueryString.parse(search.substr(1))
    let activeIndex = tab === undefined ? 0 : (types.indexOf(tab))
    let { data, loading } = useSelector(state => state.topics)
    let getData = useTopicsList()
    useEffect(() => {
        getData(tab, page)
    }, [tab, page])
    return <>
        <Menu mode={'horizontal'} selectedKeys={[activeIndex + '']}>
            {indexNavs.map((item, index) => {
                return <MenuItem key={index}><Link to={item.path}>{item.title}</Link></MenuItem>
            })}
        </Menu>
        <Itemlist data={data} loading={loading} />
        <div className='pagebox'>
            <Pagination total={1000} current={page - 0} defaultPageSize={20}
                itemRender={(page, type) => {
                    switch (type) {
                        case 'page':
                            return <Link to={`/?tab=${tab}&page=${page}`}>{page}</Link>
                        case 'prev':
                            return <Link to={`/?tab=${tab}&page=${page}`}>{'<'}</Link>
                        case 'next':
                            return <Link to={`/?tab=${tab}&page=${page}`}>{'>'}</Link>
                        default:
                            return <Link to={`/?tab=${tab}&page=${page}`}>{'...'}</Link>
                    }
                }}
            />
        </div>
    </>
}

export default Index